<template>
  <div class="choose-company-container"
       v-if="visible">
    <el-dialog :visible.sync="visible"
               @close="dialogClose"
               title="单位选择">
      <el-form :model="searchCompanyForm"
               label-width="80px">
        <el-row>
          <!-- <el-col :span="6">
            <el-form-item label="单位类型" prop="unit_type">
              <el-select
                v-model="searchCompanyForm.unit_type"
                @change="getCompanyList"
                placeholder="请选择单位类型"
              >
                <el-option
                  v-for="(item, index) in companyTypeList"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="单位名称"
                          prop="company_name">
              <el-input placeholder="请输入单位名称"
                        v-model="searchCompanyForm.company_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <!-- <el-form-item> -->
            <el-button type="primary"
                       @click="getCompanyList">搜索</el-button>
            <!-- </el-form-item> -->
          </el-col>
        </el-row>
      </el-form>

      <el-table highlight-current-row
                :data="companyList.list"
                class="company-list-table"
                @row-click="chooseCompany"
                border>
        <el-table-column prop="type_name"
                         label="单位类型"
                         align="center"
                         :formatter="handleUnitTypeFilter"></el-table-column>
        <el-table-column prop="company_name"
                         label="单位名称"
                         align="center"
                         show-overflow-tooltip></el-table-column>
      </el-table>
      <el-pagination style="text-align: center;padding-top:40px;"
                     @current-change="unitCurrentChange"
                     layout="total, prev, pager, next, jumper"
                     :total="companyList.total_count"
                     :page-size="5"></el-pagination>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary"
                   @click="confirmChooseCompany">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { pageComCustomApi } from "@/services/SystemSetting";
import { standardCodeApi } from "@/services/StandardCode";
export default {
  data () {
    return {
      visible: false,
      // 选择的单位id
      choosenCompany: {
        id: "",
        company_name: ""
      },
      // 搜索单位的参数对象
      searchCompanyForm: {
        // unit_type: "",
        company_name: "",
        is_page: 1,
        page: 1,
        page_size: 5
      },
      // 单位类型列表数据
      companyTypeList: [],
      // 单位列表数据
      companyList: {
        list: [],
        total_count: 0,
        total_page: 0
      }
    };
  },
  props: {
    dialogVisible: Boolean,
    companyInfo: Object
  },
  watch: {
    dialogVisible (newval, oldval) {
      this.visible = newval;
    }
  },
  methods: {
    dialogClose () {
      this.$emit("update:dialogVisible", false);
    },
    // 获取单位列表
    getCompanyList () {
      standardCodeApi
        .getCompanyList({
          params: this.searchCompanyForm
        })
        .then(
          res => {
            if (res.data) {
              this.companyList.list = res.data.list;
              this.companyList.total_count = res.data.total_count;
            }
          },
          err => {
            console.log(err);
          }
        );
    },
    // 获取单位类型列表
    getCompanyTypeList () {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "companyType"
          }
        })
        .then(
          res => {
            if (res.data) {
              this.companyTypeList = res.data.list;
            }
          },
          err => {
            console.log(err);
          }
        );
    },
    handleUnitTypeFilter (row) {
      var unit;
      this.companyTypeList.filter(item => {
        if (item.value == row.company_type) {
          unit = item.name;
        }
      });
      return unit;
    },
    // 选择公司
    chooseCompany (row) {
      this.choosenCompany = row;
    },
    // 确定所选择的公司
    confirmChooseCompany () {
      // this.companyInfo = this.choosenCompany
      this.$emit("update:companyInfo", this.choosenCompany);
      this.dialogClose();
    },
    unitCurrentChange (val) {
      this.searchCompanyForm.page = val;
      this.getCompanyList();
    }
  },
  created () {

  },
  mounted () {
    this.choosenCompanyId = this.companyId;
    this.visible = this.dialogVisible;
    // if (window.sessionStorage.getItem('access_token')) {
    if (window.localStorage.getItem('access_token')) {
      this.getCompanyTypeList();
      this.getCompanyList();
    }
  }
};
</script>
<style scoped lang='scss'>
</style>
